<template>
  <!-- 评价历史包括评价内容-此页面暂时不用 -->
  <baseslot>
    <template v-slot:content>
      <div class="nowpage-select-but-sty">
        <selectbutton :buttonselectlist="buttonselectlist" @nowselectbuttonindex="nowselectbuttonindex" />
      </div>
      <div class="nowpage-bar-sty">
        <topnewbar :nowbarcontent="nowbarcontent" />
      </div>
      <div v-if="true" class="nowpage-main-box">
        <el-table
          ref="tableData"
          :data="tableList"
          class="table_content"
          height="calc(100% - 100px)"
          border
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          :header-cell-style="headerColor"
          style="width:100%"
        >
          <el-table-column
            label="指标名称"
            width="200"
            prop="industry"
            :show-overflow-tooltip="true"
            align="center"
          >
            <!-- //产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉） -->
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                    scope.row.industrycount * 40 +
                    'px;line-height:' +
                    scope.row.industrycount * 40 +
                    'px'
                "
                :class="
                  scope.row.industrynumber % 2 === 0
                    ? 'blue text_ellipsis'
                    : 'white text_ellipsis'
                "
              >
                {{ scope.row.industry }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="custname"
            label="评分内容"
            :show-overflow-tooltip="true"
          >
            <!-- //评分标准同指标使用插槽原因一样 -->
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                    scope.row.zhcustidcount * 40 +
                    'px;'
                "
                :class="
                  scope.row.zhcustidnumber % 2 === 0
                    ? 'white text_ellipsis'
                    : 'blue text_ellipsis'
                "
              >
                {{ scope.row.custname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="draftTypeName"
            align="center"
            label="评价标准"
          />
          <el-table-column
            prop="lastBal"
            width="140"
            align="center"
            :show-overflow-tooltip="true"
            label="评价分数"
          />
          <el-table-column
            prop="curIncreased"
            align="right"
            :show-overflow-tooltip="true"
            label="实际结果"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            align="right"
            prop="curBal"
            label="实际评分"
          />
        </el-table>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
    </template>
  </baseslot>
</template>
<script>
import topbarreq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-indicator/index"
// import nowpagereq from "@/api/agr-safety-evaluation/evaluation-message/index"
import topnewbar from "../components/topnewbar.vue"
import baseslot from "@/components/BaseMainSlot/baseone.vue"
import Pagination from "@/components/Pagination";
import selectbutton from "@/components/selectbutton/index.vue"
import { mymixin } from "@/utils/mixin"
export default {
  components: { baseslot, Pagination, selectbutton, topnewbar },
  mixins: [mymixin],
  data() {
    return {
      topbarlist: [],
      buttonselectlist: [
        { name: "基本信息评价" },
        { name: "行业指标评价" }],
      nowbarcontent: 895,
      tableList: [],
      // 当前选中顶部按钮index
      nowbuttonselectindex: 0,
      tabledata: [
        {
          "industry": "主体信息", // 指标名称
          "zhcustid": "1", // 主要用于评分内容归类
          "custname": "基本信息应有:主体名称、统一社会信用代码(主体个人身份证)、生产地址（或注册地址）、主体类别、法人代表（生产者）、联系方式、地理坐标、种养类型、种养总规模（10分）",
          "draftTypeName": "主体名称", // 评价标准
          "lastBal": "-2分/项", // 评价分数
          "curIncreased": "不符合", // 实际结果
          "curBal": "8" // 实际评分
        },
        {
          "industry": "主体信息",
          "zhcustid": "1", // 主要用于评分内容归类
          "custname": "每缺填一项-3分", // 评分内容
          "draftTypeName": "统一社会信用代码", // 评价标准
          "lastBal": "-1分/项",
          "curIncreased": "符合",
          "curBal": "18"
        },
        {
          "industry": "主体信息", // 指标名称
          "zhcustid": "2", // 主要用于评分内容归类
          "custname": "产品信息应有:产品种类、产品种养规模（15分）", // 评分内容
          "draftTypeName": "产品种类", // 评价标准
          "lastBal": "-3分/项",
          "curIncreased": "符合",
          "curBal": "15"
        },
        {
          "industry": "主体信息", // 指标名称
          "zhcustid": "3", // 主要用于评分内容归类
          "custname": "产品种养规模信息不齐全（10分）", // 评分内容
          "draftTypeName": "产品规模", // 评价标准
          "lastBal": "-4分/项", // 评价分数
          "curIncreased": "不符合", // 实际结果
          "curBal": "6" // 实际评分
        }
      ]
    }
  },
  created() {
    this.gettopbarbuttonmessage()
    this.getTableDataList()
  },
  methods: {
    // 获取表格数据
    getTableDataList() {
      this.tableList = this.listHandle(this.tabledata)
      // let params = {
      //   page: this.currentPage,
      //   size: this.pageSize
      // }
      // nowpagereq.getlist(params).then(
      //   res => {
      //     console.log(res)
      //   }
      // )
    },
    // 获取按钮选择数据
    gettopbarbuttonmessage() {
      topbarreq.querybyconditlist().then(
        res => {
          this.topbarlist = res.data
          this.buttonselectlist = []
          this.topbarlist.forEach(
            (item, index) => {
              this.buttonselectlist.push({ name: item.evaluationIndexName })
            }
          )
        }
      )
    },
    // 按钮当前选择index
    nowselectbuttonindex(i) {
      this.nowbuttonselectindex = i
    },
    // 选择页面size
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    // 选择页面page
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    // -----单元合并处理相关-------
    // 合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0) {
        // industrycount是需要合并的字段（这里第一列合并的字段是industrycount，industrycount是经过this.$listHandle处理过的数据，是主体信息的合并的个数）
        // 如果合并的个数大于1的话
        if (row.industrycount > 1) {
          return {
            rowspan: row.industrycount,
            colspan: 1
          };
        } else if (row.industrycount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第二列与第一列同理
      //   if (columnIndex === 1) {
      //     if (row.custnamecount > 1) {
      //       return {
      //         rowspan: row.custnamecount,
      //         colspan: 1
      //       };
      //     } else if (row.custnamecount === 1) {
      //       return {
      //         rowspan: 1,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
      if (columnIndex === 1) {
        if (row.zhcustidcount > 1) {
          return {
            rowspan: row.zhcustidcount,
            colspan: 1
          };
        } else if (row.zhcustidcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第六列与第一列同理
      if (columnIndex === 5) {
        if (row.zhcustidcount > 1) {
          return {
            rowspan: row.zhcustidcount,
            colspan: 1
          };
        } else if (row.zhcustidcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 表格头部颜色
    headerColor({ rowIndex, columnIndex }) {
      return this.headerColormetod(rowIndex);
    },
    // 改变合计那一行的背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.draftTypeName === "合计") {
        return "hang";
      }
      return this.tableRowClassNamemethodes(rowIndex);
    },
    // 转化下请求回来的数据
    listHandle(list) {
      for (var key in list[0]) {
        var k = 0;
        var j = 0;
        while (k < list.length) {
          list[k][key + "count"] = 1;
          list[k][key + 'number'] = j;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][key] === list[i][key] && list[k][key] !== "") {
              list[k][key + "count"]++;
              list[i][key + "count"] = 0;
              list[i][key + 'number'] = j;
            } else {
              break;
            }
          }
          j++
          k = i;
        }
      }
      return list;
    },
    headerColormetod(rowIndex) {
      if (rowIndex === 0) {
        return { background: "#006e91", color: "#fff" };
      } else {
        return { background: "#bd1a1a", color: "#fff" };
        // return { color: "#fff" };
      }
    },
    // 斑马条纹（bg和bgnone为类名，可以在类名写样式）
    tableRowClassNamemethodes(rowIndex) {
      if (rowIndex % 2 === 0) {
        return "bg";
      } else {
        return "bgnone";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nowpage-select-but-sty{
  width: 98%;
  margin-left: 1%;
  height: 40px;
  // background-color: chartreuse;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 6;
  margin-bottom: 40px;
}
.nowpage-bar-sty{
   width:100%;
   height: 50px;
   position: relative;
   z-index: 6;
   padding-left: 10px;
}
.nowpage-main-box{
  width:100%;
  height:calc(100%);
  position: relative;
  z-index: 5;
  top: -110px;
  padding-top: 150px;
  padding-left: 1%;
  padding-right: 1%;
  border: #0ec497 1px dashed;
  background-color: #00485a;
}
</style>
<style scoped lang="scss">
// 单元格样式
::v-deep .el-table__body{
  height:auto !important;
}
.text_ellipsis{
    white-space: pre-wrap;
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    text-align: center;
    justify-content: center;
}
::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
//   color:#bd1a1a;
}
.blue {
//   background: #0cc415;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
.white {
//   background: #bd1a1a;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
